<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>插入特殊字符</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: auto;

        }

        div{
            box-sizing: border-box;
        }
        ul, ol, li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a {
            color: royalblue;
            text-decoration: none;
        }

        .base-page {
            margin: 0 auto;
            width: 50%;
        }

        .base-content {
            padding: 1rem;
            border: 1px dashed #FF7F27;
        }

        .theme-bar {
            text-align: center;
            height: 60px;
            line-height: 60px;
        }

        .btn-primary {
            box-sizing: content-box;
            display: inline-block;
            padding: .3rem 0.6rem;
            background-color: #FF7F27;
            color: #fafafa;
            border-radius: 0.2rem;
            font-size: 14px;
        }

        .btn-primary:active {
            background-color: #ff6f27;
        }

        .area-src {
            width: 100%;
            height: 100px;
            margin: 1rem 0;
            font-size: 16px;
        }

        .base-result {
            margin: 1rem 0;

        }

        .base-face {
            position: relative;
            margin: 1rem 0;
            height: 100%;
        }

        .menu-right-wrap {
            position: fixed;
            font-size: 14px;
            padding: 1rem;
            box-sizing: border-box;
            width: 25%;
            left: 0;
            top: 0;
            bottom: 0;
            overflow-y: scroll;
        }

        li.select {
            background-color: #DFDFDF;
        }
		.menu-right>li:hover{
			background-color: #eeeeee;
		}

        .face-wrap {
            width: 100%;
        }
 
        .item-face {
            width: 1.98rem;
            height: 1.98rem;
            line-height: 1.98rem;
            text-align: center;
            float: left;
        }

        .face-rect {
            background-color: #f8d7da;
        }
        @media (min-width: 360px) {
            .base-page {
                position: absolute;
                left: 25%;
                right: 0;
                width: 75%;
                padding: 0.5rem;
            }

        }
        @media (min-width: 720px) {
            .base-page {
                margin: 0 auto;
                width: 50%;
            }
            .menu-right-wrap{
                width: 25%;
            }
        }

    </style>
    <script src="faceList.js"></script>
</head>
<body>

<div class="base-page">

    <div class="theme-bar">测试一下</div>

    <div class="menu-right-wrap">
        <h3>Unicode字符表</h3>
        <ul class="menu-right"></ul>
    </div>
    <div class="base-content">
        <p>
            <a href="https://unicode-table.com/cn/blocks/" target="_blank">访问 https://unicode-table.com/cn/blocks/ 查找字符</a>
        </p>
        <textarea class="area-src" placeholder="输入待转换的字符"></textarea>
        <textarea class="area-join" placeholder="输入插入的字符"></textarea>

        <div style="text-align: right">
            <div class="btn-primary" onclick="clickJoinFace(event,'li')">转换</div>
        </div>
        <div class="base-result">
            <strong>结果</strong>
            <div class="result-wrap"></div>
        </div>
    </div>

    <div class="base-face">
        <strong>参考插入的字符</strong>

        <div class="face-wrap">
            <div style="margin-bottom: 1rem">
                <div style="width: 19%;display: inline-block;" id="face-title"></div>
                <div class="face-title-wrap" style="width: 80%;display: inline-block"></div>
            </div>
            <div class="face-content-wrap">

            </div>
        </div>
    </div>

</div>

<script>
    //修复漏掉的藏文选项json。已修复，辅助代码已废弃
    // var blist=[]
    // for(let i=0;i<faceList.length;i++){
    //     if(i<34){
    //         blist[i]=JSON.parse(JSON.stringify(faceList[i]));
    //     }else if (i==34){
    //         blist[i] = blist[i]=JSON.parse(JSON.stringify(faceList[i]));
    //         blist[i].des="藏文";
    //     } else {
    //         blist[i] = JSON.parse(JSON.stringify(faceList[i]));
    //         blist[i].des = faceList[i-1].des
    //     }
    // }
    // faceList = blist;
    //
    function joinFace(str, face) {
        return str.split("").join(face);
    }

    function clickJoinFace(e) {
        var srcStr = document.querySelector(".area-src").value;
        var joinStr = document.querySelector(".area-join").value;
        if (!srcStr || !joinStr) return;

        var resultStr = joinFace(srcStr, joinStr);
        var elReslut = document.querySelector(".result-wrap");
        elReslut.innerText = resultStr;
    }

    window.onload = function () {

        var ulHtml = ""
        var ul = document.querySelector(".menu-right");
        for (var i = 0; i < faceList.length; i++) {
            var face = faceList[i];
            var spanHtml = "<span>" + face.start + "—" + face.end + "</span>";
            var aHtml = "<span> " + face.des + "</span>";
            var clickText = '"clickFaceMenu(event,' + i + ')"';

            ulHtml += "<li onclick=" + clickText + ">" + spanHtml + aHtml + "</li>";
        }
        ul.innerHTML = ulHtml;

        var faceTitleWrap = document.querySelector(".face-title-wrap");

        for (var j = 0; j < 16; j++) {
            var faceTitleItem = document.createElement("span");
            faceTitleItem.className = "item-face";
            faceTitleItem.innerText = j.toString(16).toUpperCase();
            faceTitleWrap.appendChild(faceTitleItem);
        }

    };

    function clickFaceMenu(e, index) {
        //console.log(index);
		
		
        //document.querySelectorAll("li.select").forEach(function (el, index, listObj) {
        //     el.className = "";
        //});
		//兼容ie8
		var elLis = document.querySelectorAll("li.select");
		//console.log(elLis,"222")
		for(var i=0;i<elLis.length;i++){
			elLis[i].className="";
			
		}
        document.querySelectorAll("li")[index].className = "select";
        var face = faceList[index];
        var start = parseInt(face.start, 16);
        var end = parseInt(face.end, 16);
        var count = end - start;

        var faceWrap = document.querySelector(".face-content-wrap");
        document.getElementById("face-title").innerText = face.des;

        var faceHtml = "";
        var column = 16;
        var row = count / column;
		//faceWrap.innerHTML = "";
        for (var i = 0; i < row; i++) {
            var startCode = (start + i * 16).toString(16);
            var endCode = (start + (i + 1) * 16 - 1).toString(16);
            var desStart = ("0000".substring(startCode.length) + startCode).toUpperCase();
            var desEnd = ("0000".substring(endCode.length) + endCode).toUpperCase();

            faceHtml += ("<div style='width: 19%;display: inline-block'>" + desStart + "—" + desEnd + "</div><div style='width: 80%;display: inline-block'>");
            for (var j = 0; j < column; j++) {
                var ind = i * column + j;
                var unicode = start + ind;
                var text = String.fromCharCode(unicode);
                var itemFaceText = "<div class='item-face face-rect'>" + text + "</div>";

                faceHtml += itemFaceText;
            }
            faceHtml += "</div>";
			//faceWrap.innerHTML += faceHtml;
        }
        faceWrap.innerHTML = faceHtml;

    }

// document.body.innerText=JSON.stringify(faceList)
</script>
</body>
</html>